<template>
 <div class="page-container">
     <div class="common-content">
         <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
         <div class="search-wrap">
             <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                 <el-form-item label="主键：">
                     <el-input v-model="searchFilters.id" placeholder="请输入主键"></el-input>
                 </el-form-item>
                 <el-form-item label="合同编码：">
                     <el-input v-model="searchFilters.contractCode" placeholder="请输入合同编码"></el-input>
                 </el-form-item>
                 <el-form-item label="业务类型：1-采购单；2-代销单；3-经销单；：">
                     <el-input v-model="searchFilters.busiType" placeholder="请输入业务类型：1-采购单；2-代销单；3-经销单；"></el-input>
                 </el-form-item>
                 <el-form-item label="根据业务类型不同，存入不同类型的编号，如果是采购单，则存采购单编码；：">
                     <el-input v-model="searchFilters.busiCode" placeholder="请输入根据业务类型不同，存入不同类型的编号，如果是采购单，则存采购单编码；"></el-input>
                 </el-form-item>
                 <el-form-item label="采购单编码：">
                     <el-input v-model="searchFilters.supplierCode" placeholder="请输入采购单编码"></el-input>
                 </el-form-item>
                 <el-form-item label="采购单名称：">
                     <el-input v-model="searchFilters.supplierName" placeholder="请输入采购单名称"></el-input>
                 </el-form-item>
                 <el-form-item label="采购数量：">
                     <el-input v-model="searchFilters.puchaseNum" placeholder="请输入采购数量"></el-input>
                 </el-form-item>
                 <el-form-item label="交易币别,CNY-人民币;USD-美元....：">
                     <el-input v-model="searchFilters.tradeCurrency" placeholder="请输入交易币别,CNY-人民币;USD-美元...."></el-input>
                 </el-form-item>
                 <el-form-item label="产品名称：">
                     <el-input v-model="searchFilters.productCode" placeholder="请输入产品名称"></el-input>
                 </el-form-item>
                 <el-form-item label="产品名称：">
                     <el-input v-model="searchFilters.productName" placeholder="请输入产品名称"></el-input>
                 </el-form-item>
                 <el-form-item label="产品单位：">
                     <el-input v-model="searchFilters.productUnit" placeholder="请输入产品单位"></el-input>
                 </el-form-item>
                 <el-form-item label="置换率：">
                     <el-input v-model="searchFilters.exchangeRate" placeholder="请输入置换率"></el-input>
                 </el-form-item>
                 <el-form-item label="条形码：">
                     <el-input v-model="searchFilters.productBarNo" placeholder="请输入条形码"></el-input>
                 </el-form-item>
                 <el-form-item label="产品规格：">
                     <el-input v-model="searchFilters.productSize" placeholder="请输入产品规格"></el-input>
                 </el-form-item>
                 <el-form-item label="税率：">
                     <el-input v-model="searchFilters.taxRate" placeholder="请输入税率"></el-input>
                 </el-form-item>
                 <el-form-item label="最小采购量：">
                     <el-input v-model="searchFilters.minNum" placeholder="请输入最小采购量"></el-input>
                 </el-form-item>
                 <el-form-item label="最大采购量：">
                     <el-input v-model="searchFilters.maxNum" placeholder="请输入最大采购量"></el-input>
                 </el-form-item>
                 <el-form-item label="是否包邮：0-不含；1-包含；：">
                     <el-input v-model="searchFilters.hasTransportPrice" placeholder="请输入是否包邮：0-不含；1-包含；"></el-input>
                 </el-form-item>
                 <el-form-item label="转换率：">
                     <el-input v-model="searchFilters.transferRate" placeholder="请输入转换率"></el-input>
                 </el-form-item>
                 <el-form-item label="运费：">
                     <el-input v-model="searchFilters.transportPrice" placeholder="请输入运费"></el-input>
                 </el-form-item>
                 <el-form-item label="原税率：">
                     <el-input v-model="searchFilters.originTaxRate" placeholder="请输入原税率"></el-input>
                 </el-form-item>
                 <el-form-item label="原不含税价格；：">
                     <el-input v-model="searchFilters.originAmountWithoutTax" placeholder="请输入原不含税价格；"></el-input>
                 </el-form-item>
                 <el-form-item label="原含税价格；：">
                     <el-input v-model="searchFilters.originAmountWithTax" placeholder="请输入原含税价格；"></el-input>
                 </el-form-item>
                 <el-form-item label="原起订量：">
                     <el-input v-model="searchFilters.originMinNum" placeholder="请输入原起订量"></el-input>
                 </el-form-item>
                 <el-form-item label="原最大订货量：">
                     <el-input v-model="searchFilters.originMaxNum" placeholder="请输入原最大订货量"></el-input>
                 </el-form-item>
                 <el-form-item label="原运输方式（1-铁路；2-空运；3-公路；4-河运；5-海运；6-其他）：">
                     <el-input v-model="searchFilters.originTransportType" placeholder="请输入原运输方式（1-铁路；2-空运；3-公路；4-河运；5-海运；6-其他）"></el-input>
                 </el-form-item>
                 <el-form-item label="原是否包含运费(0-不含；1-包含)：">
                     <el-input v-model="searchFilters.originHasTransportPrice" placeholder="请输入原是否包含运费(0-不含；1-包含)"></el-input>
                 </el-form-item>
                 <el-form-item label="创建时间：">
                     <el-input v-model="searchFilters.createTime" placeholder="请输入创建时间"></el-input>
                 </el-form-item>
                 <el-form-item label="修改时间：">
                     <el-input v-model="searchFilters.updateTime" placeholder="请输入修改时间"></el-input>
                 </el-form-item>
                 <el-form-item label="创建人Id：">
                     <el-input v-model="searchFilters.creater" placeholder="请输入创建人Id"></el-input>
                 </el-form-item>
                 <el-form-item label="修改人Id：">
                     <el-input v-model="searchFilters.updater" placeholder="请输入修改人Id"></el-input>
                 </el-form-item>
                 <el-form-item label="创建人姓名：">
                     <el-input v-model="searchFilters.createrName" placeholder="请输入创建人姓名"></el-input>
                 </el-form-item>
                 <el-form-item label="修改人姓名：">
                     <el-input v-model="searchFilters.updatorName" placeholder="请输入修改人姓名"></el-input>
                 </el-form-item>
                 <el-form-item label="状态：">
                     <el-input v-model="searchFilters.status" placeholder="请输入状态"></el-input>
                 </el-form-item>
                 <el-form-item label="删除标志：0-未删除；1-已删除；：">
                     <el-input v-model="searchFilters.deleteFlag" placeholder="请输入删除标志：0-未删除；1-已删除；"></el-input>
                 </el-form-item>
                 <!-- 搜索区域按钮-查询,重置 -->
                 <div class="tool-wrap">
                     <div class="left-area">
                         <el-button-group>
                             <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                             <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                             <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                         </el-button-group>
                     </div>
                 </div>
                 <!-- 表格数据部分 -->
                 <div class="table-wrap">
                     <jic-table :height="350" :operationWidth=300 :tableList="tableList" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation=true :showEditOperation=true :showBatchDelete=false :showSelection=false :showIndex=false :showDeleteOperation=true @findPage="findPage" @handleDetail="handleDetail" @handleEdit="handleEdit" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
                 </div>
             </el-form>
         </div>
     </div>
 </div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

    //===== 注册组件 =====
    components: {
        jicTable,
    },

    //===== 数据初始化区=====
    data() {
        return {

            //===== 公共数据初始化 =====
            pageIndex: 0, //当前页数：首页；
            pageSize: 10, //每页记录数：10条记录；
            totalSize: 0, //总记录数：返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: 'mini',

            //=====表格表头数据=====
            tableHeaderList: [{
                    prop: "id",
                    label: "主键",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "contractCode",
                    label: "合同编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "busiType",
                    label: "业务类型：1-采购单；2-代销单；3-经销单；",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "busiCode",
                    label: "根据业务类型不同，存入不同类型的编号，如果是采购单，则存采购单编码；",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "supplierCode",
                    label: "采购单编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "supplierName",
                    label: "采购单名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "puchaseNum",
                    label: "采购数量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "tradeCurrency",
                    label: "交易币别,CNY-人民币;USD-美元....",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productCode",
                    label: "产品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productName",
                    label: "产品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productUnit",
                    label: "产品单位",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "exchangeRate",
                    label: "置换率",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productBarNo",
                    label: "条形码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productSize",
                    label: "产品规格",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "taxRate",
                    label: "税率",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "minNum",
                    label: "最小采购量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "maxNum",
                    label: "最大采购量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "hasTransportPrice",
                    label: "是否包邮：0-不含；1-包含；",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "transferRate",
                    label: "转换率",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "transportPrice",
                    label: "运费",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originTaxRate",
                    label: "原税率",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originAmountWithoutTax",
                    label: "原不含税价格；",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originAmountWithTax",
                    label: "原含税价格；",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originMinNum",
                    label: "原起订量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originMaxNum",
                    label: "原最大订货量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originTransportType",
                    label: "原运输方式（1-铁路；2-空运；3-公路；4-河运；5-海运；6-其他）",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "originHasTransportPrice",
                    label: "原是否包含运费(0-不含；1-包含)",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "createTime",
                    label: "创建时间",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updateTime",
                    label: "修改时间",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "creater",
                    label: "创建人Id",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updater",
                    label: "修改人Id",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "createrName",
                    label: "创建人姓名",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "updatorName",
                    label: "修改人姓名",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "status",
                    label: "状态",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deleteFlag",
                    label: "删除标志：0-未删除；1-已删除；",
                    minWidth: 100,
                    formatter: null
                },
            ],

            //=====搜索表单对应的数据对象初始化=====
            searchFilters: {
                id: null,
                contractCode: null,
                busiType: null,
                busiCode: null,
                supplierCode: null,
                supplierName: null,
                puchaseNum: null,
                tradeCurrency: null,
                productCode: null,
                productName: null,
                productUnit: null,
                exchangeRate: null,
                productBarNo: null,
                productSize: null,
                taxRate: null,
                minNum: null,
                maxNum: null,
                hasTransportPrice: null,
                transferRate: null,
                transportPrice: null,
                originTaxRate: null,
                originAmountWithoutTax: null,
                originAmountWithTax: null,
                originMinNum: null,
                originMaxNum: null,
                originTransportType: null,
                originHasTransportPrice: null,
                createTime: null,
                updateTime: null,
                creater: null,
                updater: null,
                createrName: null,
                updatorName: null,
                status: null,
                deleteFlag: null,
            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;
        }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
        this.findPage();
    },

    //=====Vue.js 方法区=====
    methods: {

        //1.查询按钮：查询列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }

            this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findPurchasePricePage(this_.searchFilters, function (res) {
                if (res.code === "0000") {
                    this_.tableList = res.data.list;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        // 2.重置按钮：无条件查询搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 3.详情按钮对应的方法
        handleDetail(params) {
            this.$router.push({
                path: "/PurchasePriceDetail/",
                query: {
                    id: params.row.id,
                    disabled: true
                }
            });
        },

        // 4.编辑按钮对应的方法
        handleEdit(params) {
            this.$router.push({
                path: "/PurchasePriceDetail/",
                query: {
                    id: params.row.id,
                    disabled: false
                }
            });
        },

        // 5.跳转到新增记录页面；
        addForm(params) {
            params = null;
            this.$router.push({
                path: "/getPurchasePriceDetail/" + params
            });
        },
        // 6.每页记录数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },

        // 7.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 8.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 9.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        // 10.删除按钮：删除选中的记录
        handleDelete(data) {
            this.utils.request.deletePurchasePrice({
                id: data.row.id
            }, res => {
                if (res.data) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.findPage();
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'warning'
                    });
                }
            });
        }
        //==========Vue.js自定义方法区==========

    },
}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
